import React, {Component} from 'react';
import {
  Alert,
  Image,
  PixelRatio,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import RNExitApp from 'react-native-exit-app';
import StorageTools from './component/StorageTools';
import {reset} from './utils/navUtil';

class MenuScene extends Component {
  static navigationOptions = ({navigation}) => ({
    title: '您好，欢迎使用移动抄表终端',
    headerStyle: {
      backgroundColor: 'rgba(0, 191 ,255, 0.5)',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  });

  constructor(props) {
    super(props);
  }

  exitApp = () => {
    Alert.alert('提示', '确定要退出吗？', [
      {
        text: '确定',
        onPress: () => this.exit(),
      },
      {
        text: '取消',
        onPress: () => console.log('点击取消'),
      },
    ]);
  };

  exit() {
    StorageTools.remove('user', () => {
      // RNExitApp.exitApp();
      reset(this.props.navigation, 'LoginScene');
    });
  }

  gotoPage = page => {
    this.props.navigation.navigate(page, {});
  };

  renderItem = (icon, title, onPress) => {
    return (
      <TouchableOpacity
        style={[styles.item, styles.center, styles.menulineRight]}
        activeOpacity={0.5}
        onPress={onPress}>
        <Image source={icon} style={styles.secondimage} />
        <Text style={styles.secondfont}>{title}</Text>
      </TouchableOpacity>
    );
  };

  render() {
    //加载后
    return (
      <ScrollView>
        <View style={{flex: 1}}>
          <View style={styles.flex}>
            <Image source={require('../img/banner.gif')} />
          </View>
          <View style={styles.flex}>
            <View style={[styles.secondmenu]}>
              <View style={[{flexDirection: 'row'}, styles.menulineCenter]}>
                {this.renderItem(
                  require('../img/meterTransfer.gif'),
                  '抄表收费',
                  () => {
                    //当a页面点击跳转到Device页面，并需要向后面传递参数
                    //onPress = {() => this.navigation.navigate('跳转的路由名称',{参数})}
                    this.gotoPage('MeterBooksScene');
                  },
                )}
                {this.renderItem(
                  require('../img/custInfo.gif'),
                  '用户资料',
                  () => {
                    //当a页面点击跳转到Device页面，并需要向后面传递参数
                    //onPress = {() => this.navigation.navigate('跳转的路由名称',{参数})}
                    this.gotoPage('CustInfoScene');
                  },
                )}

                {this.renderItem(
                  require('../img/arrow01.png'),
                  '抄表顺序',
                  () => {
                    //当a页面点击跳转到Device页面，并需要向后面传递参数
                    //onPress = {() => this.navigation.navigate('跳转的路由名称',{参数})}
                    this.gotoPage('CustInfoOrder');
                  },
                )}
              </View>

              <View style={[{flexDirection: 'row'}, styles.menulineCenter]}>
                {this.renderItem(
                  require('../img/notice.gif'),
                  '汇总统计',
                  () => {
                    //当a页面点击跳转到Device页面，并需要向后面传递参数
                    //onPress = {() => this.navigation.navigate('跳转的路由名称',{参数})}
                    this.gotoPage('StatisticsScene');
                  },
                )}
                {this.renderItem(
                  require('../img/system.png'),
                  '系统设置',
                  () => {
                    //当a页面点击跳转到Device页面，并需要向后面传递参数
                    //onPress = {() => this.navigation.navigate('跳转的路由名称',{参数})}
                    this.gotoPage('SysConfig');
                  },
                )}

                {this.renderItem(require('../img/exit.png'), '退出登录', () => {
                  this.exitApp();
                })}
              </View>
            </View>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  secondmenu: {
    marginTop: 5,
    marginLeft: 5,
    marginRight: 5,
    backgroundColor: 'white',
  },
  item: {
    flex: 1,
    height: 80,
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  flex: {
    flex: 1,
  },
  font: {
    color: '#fff',
    fontSize: 14,
  },
  secondfont: {
    color: 'black',
    fontSize: 16,
  },
  lineLeftRight: {
    borderLeftWidth: 1 / PixelRatio.get(),
    borderRightWidth: 1 / PixelRatio.get(),
    borderColor: '#fff',
  },

  lineCenter: {
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: '#fff',
  },
  menulineRight: {
    borderRightWidth: 0.5 / PixelRatio.get(),
    borderColor: '#d0d0d0',
  },

  menulineCenter: {
    borderBottomWidth: 1 / PixelRatio.get(),
    borderColor: '#d0d0d0',
  },
  image: {
    width: 30,
    height: 30,
    marginTop: 5,
  },
  secondimage: {
    width: 40,
    height: 40,
    marginBottom: 4,
  },
  wrapper: {
    height: 80,
  },
  slide: {
    height: 80,
    resizeMode: 'contain',
  },
});
export default MenuScene;
